<%--
  Created by IntelliJ IDEA.
  User: glls
  Date: 2022/3/31
  Time: 10:45
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <script src="js/jquery.js"></script>
    <script>
        function loadGetName(){
            var xmlHttp;

            if(window.XMLHttpRequest){
                //有的浏览器 支持 这个对象直接new
                xmlHttp = new XMLHttpRequest();
            }else{
                // 不支持 简介创建这个对象
                xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
            }

            // 指定回调函数  监听请求的执行结果
            xmlHttp.onreadystatechange = function (){
                if(xmlHttp.readyState==4 && xmlHttp.status==200){
                    //响应结束  并且 响应正常
                    var result = xmlHttp.responseText;

                    $("#name2").val(result);
                }
            }

            //与服务器建立连接
            //get 请求方式
            ///getAjaxName  请求路径
            //true 是否异步
            xmlHttp.open("get","/getAjaxName?name=浩林",true);

            //发送请求
            xmlHttp.send();

        }

        function loadPostName(){
            var xmlHttp;

            if(window.XMLHttpRequest){
                //有的浏览器 支持 这个对象直接new
                xmlHttp = new XMLHttpRequest();
            }else{
                // 不支持 简介创建这个对象
                xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
            }

            // 指定回调函数  监听请求的执行结果
            xmlHttp.onreadystatechange = function (){
                if(xmlHttp.readyState==4 && xmlHttp.status==200){
                    //响应结束  并且 响应正常
                    var result = xmlHttp.responseText;

                    $("#name3").val(result);
                }
            }

            //与服务器建立连接
            //post 请求方式
            ///getAjaxName  请求路径
            //true 是否异步
            xmlHttp.open("post","/getAjaxName",true);
            //设置请求头

            xmlHttp.setRequestHeader("content-type","application/x-www-form-urlencoded");

            //发送请求
            xmlHttp.send("name=浩林2");
        }

    </script>
</head>
<body>
<input type="text" id="name1" value="${name}"> <a href="${pageContext.request.contextPath}/getName">传统方式交互</a>
<input type="text" id="name2" > <a href="javascript:loadGetName()">ajax方式 get 请求</a>
<input type="text" id="name3" > <a href="javascript:loadPostName()">ajax方式 post 请求</a>
</body>
</html>
